<template>
  <!-- :style="'height:'+pageHeight" -->
  <div class="swiper-height">
    <div
      class="swiper-page-container"
    >
      <div
        class="swiper-container-left"
      >
        <carousel
          :mhId="mhId"
          v-loading="loading"
          @loadImg="loadImg"
          class="small-swiper"
        />
        <!-- <div class="swiper-weather">
        <iframe
          name="weather_inc"
          src="http://i.tianqi.com/index.php?c=code&id=55"
          width="255"
          height="100"
          frameborder="0"
          scrolling="no"
        />
      </div> -->
        <!-- <div id="he-plugin-simple" /> -->
        <time-line
          @showPage="showDetail"
          :mhId="mhId"
        />
      </div>
      <tabs-Page
        :mhId="mhId"
        @showPage="showDetail"
        class="swiper-container-right"
      />
    </div>
  </div>
</template>
<script>
import carousel from '../../components/carousel/index';
import tabsPage from '../../components/tabsPage/index';
import timeLine from '../../components/timeLine/index';

export default {
  name: 'MainPage',
  components: {
    carousel,
    tabsPage,
    timeLine,
  },
  props: {
    mhId: {
      default: '',
      type: String,
    },
  },
  data() {
    return {
      searchMore: true,
      loading: true,
      pageHeight: '',
    };
  },
  mounted() {
    window.addEventListener('scroll', this.scrollLoad);
    this.pageHeight = `${document.body.clientHeight}px`;
  },
  methods: {
    loadImg(data) {
      this.loading = data;
    },
    showDetail(data) {
      this.$emit('showPage', data);
    },
  },
};
</script>
<style scoped rel="stylesheet/scss" lang="scss" >
.swiper-height{
  width: 100%;
  overflow: hidden;
}
.swiper-container-left{
  width: 350px;
  // display: flex;
  // flex-direction: column;
  overflow: hidden;
  margin-right:20px;
  .small-swiper{
    height:240px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  .swiper-weather{
    background: #409EFF;
    border-radius: 4px;
    background-image: linear-gradient(#b8d5f6, #2a7beb);
    padding:20px 30px;
    margin-bottom:20px;
  }
}
.swiper-page-container{
  width: 1250px;
  margin: 60px auto 20px;
  display: flex;
  // overflow: hidden;
  // overflow-y: scroll;
  min-height: calc(100% - 180px);
}
.swiper-container-right{
  flex:1;
  border-radius: 6px;
  // overflow: hidden;
    .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}

</style>
